export default function LoadMoreBtn({
  onClickLoadMore,
  isDisabled,
  isLoading,
}: {
  onClickLoadMore: () => void;
  isDisabled?: boolean;
  isLoading?: boolean;
}) {
  return (
    <div className="row">
      <div className="col">
        <button
          onClick={onClickLoadMore}
          disabled={isLoading && isDisabled}
          type="button"
          className="btn rounded-pill text-secondary-emphasis w-100"
        >
          {isLoading ? (
            <>
              <span
                className="spinner-border spinner-border-sm me-2"
                role="status"
                aria-hidden="true"
              ></span>
              Loading...
            </>
          ) : (
            <i className="bi bi-three-dots"></i>
          )}
        </button>
      </div>
    </div>
  );
}
